/** 
参数设置--从机设备
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>从机设备</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 刷新添加 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh()"
          >刷新</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="add()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        sortable
        prop="DevId"
        label="标识"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="DevName"
        label="名称"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="ProType"
        label="协议类型"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="Param"
        label="参数"
        width="150"
      >
        <template slot-scope="scope">
          <div v-for="(val, index) in scope.row.Param" :key="index">
            <div>{{ `${index}:${val}` }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="State"
        label="状态"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="tag-group" v-if="scope.row.State">
            <el-tag type="success" effect="dark">{{ scope.row.State }}</el-tag>
          </div>
          <div class="tag-group" v-else>
            <el-tag type="info" effect="dark">{{ scope.row.State }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="信息" width="190">
        <template slot-scope="scope">
          <div v-for="(val, index) in scope.row.Info" :key="index">
            <div>
              {{ `${index}:${val}` }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="使能" width="120">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.Enable"
            class="tableScopeSwitch"
            :active-value="1"
            :inactive-value="0"
            active-text="使能"
            inactive-text="关闭"
            @change="open(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="warning" @click="update(scope.row)"
            >点表</el-button
          >
          <el-button size="mini" type="success" @click="getSubmit(scope.row)"
            >监控</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="variableDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加设备" :visible.sync="addShow" width="40%">
      <el-descriptions :column="1">
        <el-descriptions-item label="标识">
          <el-input
            style="margin: -5px 0 0 15px"
            v-model="getList.DevId"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="名称">
          <el-input
            style="margin: -5px 0 0 15px"
            v-model="getList.DevName"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-cascader
            style="margin: -5px 0 0 15px"
            v-model="getList.ProType"
            :options="options"
            clearable
          ></el-cascader>
        </el-descriptions-item>
        <el-descriptions-item label="串口"
          ><el-select
            style="margin: -5px 0 0 15px"
            v-model="getList.ComInf"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="站地址"
          ><el-input v-model="getList.Sid"></el-input
        ></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addContent()">确定</el-button>
        <el-button @click="addShow = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改从机设备" :visible.sync="editShow" width="40%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本设置" name="first"></el-tab-pane>
        <el-tab-pane label="高级设置" name="second"></el-tab-pane>
      </el-tabs>
      <el-descriptions :column="1">
        <el-descriptions-item label="名称">
          <el-input
            style="margin: -5px 0 0 15px"
            v-model="getEditList.DevName"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="串口"
          ><el-select
            style="margin: -5px 0 0 15px"
            v-model="getEditList.ComInf"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="站地址"
          ><el-input v-model="getEditList.Sid"></el-input
        ></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editContent()">确定</el-button>
        <el-button @click="editShow = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 点表弹窗 -->
    <el-dialog title="点表编辑" :visible.sync="updateShow" width="80%">
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addDian()"
            >添加</el-button
          >
          <el-button type="success" @click="exportToExcel">导出</el-button>
          <!-- <download-excel
            class="export-excel-wrapper"
            :data="DetailsForm"
            :fields="json_fields"
            :header="123"
            name="电表数据.xls"
          >
            上面可以自定义自己的样式，还可以引用其他组件button
            <el-button type="success" @click="exportToExcel">导出</el-button>
          </download-excel> -->
        </el-form-item>
      </el-form>
      <!--点表编辑--列表-->
      <el-table
        size="small"
        :data="dianList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          sortable
          prop="ID"
          label="标识"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="Name"
          label="名称"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          align="center"
          sortable
          prop="RegType"
          label="寄存器"
          width="120"
        >
             <template slot-scope="props">
                       
            <el-select
              ref="fuck"
              size="mini"
              v-model="props.row.RegType"
              @change="choiceOn"
              value-key="index"
            >
              <el-option
                v-for="item in RegTypeoptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
                     
          </template>
          <!-- <template>
            <el-select
              ref="fuck"
              multiple
              size="mini"
              v-model="getRegTypeList.RegTypes"
              @change="choiceOn"
            >
              <el-option
                v-for="item in RegTypeoptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template> -->
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="RegAddr"
          label="地址"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="DataType"
          label="数据类型"
          width="120"
        >
          <template slot-scope="scope">
            <el-select
              ref="fuck"
              size="mini"
              v-model="scope.row.DataType"
              @change="choiceOn"
            >
              <el-option
                v-for="item in DataTypeOptions[scope.row.RegType]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="AccessMode"
          label="读写"
          width="120"
        >
          <template slot-scope="scope">
            <el-select
              ref="fuck"
              size="mini"
              v-model="scope.row.AccessMode"
            >
              <el-option
                v-for="item in AccessModeOptionss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="Pfml"
          label="正向公式"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="Ifml"
          label="逆向公式"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="ReportMode"
          label="上报方式"
          width="120"
        >
          <template slot-scope="scope">
            <el-select
              ref="fuck"
              size="mini"
              v-model="scope.row.ReportMode"
            >
              <el-option
                v-for="item in ReportModeOptionss"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteDian(scope.row)"
              >DELETE</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateContent()">确定</el-button>
        <el-button @click="updateShow = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 监控弹窗 -->
    <el-dialog title="数据监控" :visible.sync="controlShow" width="55%">
      <el-table
        size="small"
        :data="controlList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          sortable
          prop="ID"
          label="标识"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="Name"
          label="名称"
          width="120"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="TimeStamp"
          label="更新时间"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          sortable
          prop="Value"
          label="值"
          width="150"
        >
        </el-table-column>
        <el-table-column align="center" label="动作" min-width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="setData(scope.row)"
              >设置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="tabListPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-sizes="pageSizes"
          :page-size="formInline.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>

    <el-dialog title="下发控制" :visible.sync="setShow" width="30%">
      <el-descriptions :column="1" style="margin-top: 15px">
        <el-descriptions-item label="数值">
          <el-input
            v-model="getcontrolLists.Value"
            style="margin-top: -10px"
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="controlSet()"
          >确定</el-button
        >
        <el-button size="mini" @click="setShow = false">取消</el-button>
      </div>
    </el-dialog>

    <div class="tabListPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.page"
        :page-sizes="pageSizes"
        :page-size="formInline.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

 <script>
import {
  variableList,
  typeList,
  variableSave,
  variableDelete,
  variableEdit,
  variableOpen,
  permissionList,
  dianAllList,
  permissionUpdate,
  exportList,
  controlList,
  controlUpdate,
} from "../../api/userMG";
// import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      setShow: false,
      controlShow: false,
      controlList: [],
      dianList: [],
      updateShow: false,
      activeName: "first",
      editShow: false,
      options: [],
      addShow: false,
      listData: [],
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 0,
      // 个数选择器（可修改）
      pageSizes: [10, 20, 30, 40],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
      getList: {
        DevId: "",
        DevName: "",
        ProType: "",
        ComInf: "",
        Sid: "",
      },
      getEditList: {
        DevId: "",
        DevName: "",
        ComInf: "",
        Sid: "",
      },
      RegTypeoptions: [], //寄存器：下拉框数据
      DataTypeOptions: {}, //数据类型：下拉框数据
      AccessModeOptionss: [
        {value:0,
         label:'只读'
        },
        {value:1,
         label:'可写'
        }
      ], //读写：下拉框数据
      ReportModeOptionss: [
        {
          value:1,
         label:'周期上报'
        },{
          value:2,
         label:'变化上报'
        }
      ], //上报方式：下拉框数据
      particularsDAta: {}, //展示的数据
      dianListOptions: [], //下拉框请求接口数据
      getcontrolLists: {
        DevId:"",
        NodeId:"",
        Value: "",
      },
      formInline: {
        page: 0,
        limit: 10,
        varLable: "",
        varName: "",
        token: localStorage.getItem("logintoken"),
      },
      // 删除
      seletedata: {
        ids: "",
        token: localStorage.getItem("logintoken"),
      },

      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      loading: false,
      options2: [
        {
          value: 1,
          label: "COM1",
        },
        {
          value: 2,
          label: "COM2",
        },
      ],
      excelData: [],
      // 导出表格数据
      title: "xx公司表格",
      json_fields: {
        排查日期: "date",
        整改隐患内容: "details",
        整改措施: "measure",
        整改时限: "timeLimit",
        应急措施和预案: "plan",
        整改责任人: "personInCharge",
        填表人: "preparer",
        整改资金: "fund",
        整改完成情况: "complete",
        备注: "remark",
      },
      DetailsForm: [
        {
          date: "2022-3-10",
          details: "卸油区过路灯损坏",
          measure: "更换灯泡",
          timeLimit: "2022-3-21",
          plan: "先使用充电灯代替,贴好安全提醒告示",
          personInCharge: "王xx",
          preparer: "王xx",
          fund: "20元",
          complete: "已完成整改",
          remark: "重新更换了灯泡",
        },
      ],
    };
  },

  // 注册组件
  components: {
    // Pagination
  },
  /**
   * 数据发生改变
   */

  watch: {},

  /**
   * 创建完毕
   */

  created() {
    this.getShowSpecial();
    this.typeList();
    // this.updatedian();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.formInline.page = 1;
      this.formInline.limit = val;
      // 点击每页显示的条数时，显示第一页
      this.getShowSpecial();
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      // this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.formInline.page = val;
      // 切换页码时，要获取每页显示的条数
      this.getShowSpecial();
    },
    // 从机设备-渲染数据
    getShowSpecial() {
      variableList({
        // 显示第几页
        index: this.formInline.page,
        // 每页显示的条数
        // pageSize: this.formInline.limit,
      }).then((res) => {
        console.log(res);
        this.listData = res.Data.DevMap;
        /* 分页赋值
        this.formInline.page = res.data.index;
        this.formInline.limit = res.data.pageSize;
        this.totalCount = res.data.totalCount;*/
      });
    },
    add() {
      this.addShow = true;
    },
    // 从机设备-新增类型下拉框
    typeList() {
      typeList().then((res) => {
        console.log(res);
        this.options = res.Data;
      });
    },
    // 添加设备类型接口
    addContent() {
      variableSave(this.getList)
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.Message,
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.Message);
        });
    },
    // 刷新
    refresh() {
      this.loading = true;
      setTimeout(async () => {
        await this.getShowSpecial(); // 这里是拿到数据
        this.loading = false; // 计时器结束 停止转圈圈
      }, 1000);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    edit(row) {
      this.editShow = true;
      this.getEditList.DevName = row.DevName;
      this.getEditList.DevId = row.DevId;
      this.getEditList.ComInf = row.ComInf;
      this.getEditList.Sid = row.Sid;
    },
    //修改从机设备
    editContent() {
      variableEdit(this.getEditList)
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.Message,
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.Message);
        });
    },
    // 从机设备-删除
    variableDelete(row) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          variableDelete({ DevId: row.DevId }).then((res) => {
            console.log(res);
            if (res.Code === 0) {
              // 删除成功提示
              this.$message({
                showClose: true,
                message: res.Message,
                type: "success",
                duration: 1000,
                center: true,
              });
              // 重新刷新最新的用户列表
              this.getShowSpecial();
            } else {
              this.$message.error(res.Message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 使能从机设备
    open(row) {
      variableOpen({ DevId: row.DevId, Enable: row.Enable })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.Message,
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.Message);
        });
    },
    choiceOn(value) {
      let idx = "";
      this.dianListOptions.map((item, index) => {
        if (item.RegType == value || item.DataType == value) {
          idx = index;
        }
      });
      this.particularsDAta = this.dianListOptions[idx];
      console.log(this.particularsDAta);
    },
    // 点表---渲染
    update(row) {
      this.updateShow = true;
      console.log(row.DevId);
      permissionList({ devId: row.DevId })
        .then((res) => {
          console.log(res, "点表");
          this.dianList = res.Data;
          this.AccessModeOptions = this.dianList.forEach((item) => {//处理一哈这个数组
            console.log(this.AccessModeOptions);
            if (item.AccessMode == 0) {
              item.AccessMode = "只读";
            } else {
              item.AccessMode = "可写";
            }
            
          console.log(this.AccessModeOptions,'这个是读写')
            return { value: item.AccessMode, label: item.AccessMode };
          });
          this.ReportModeOptions = this.dianList.forEach((item) => {
            console.log(this.ReportModeOptions);
            return { value: item.ReportMode, label: item.ReportMode };
          });

          dianAllList({ ProType: row.ProType }).then((res) => {
            this.dianListOptions = res.Data.Properties;
            console.log(row.ProType);
            this.$nextTick(async () => {
              this.RegTypeoptions = this.dianListOptions.map((items) => {
                return { value: items.RegType, label: items.RegType };
              });
              // this.DataTypeOptions = this.dianListOptions.map((items) => {
              //   items.DataType.map((a) => {
              //     return { value: a, label: a };
              //   });
              // });
              this.DataTypeOptions = {};
              this.dianListOptions.forEach((item) => {
                this.DataTypeOptions[item.RegType] = item.DataType.map(
                  (value) => {
                    return { label: value, value };
                  }
                );
              });
              console.log(this.DataTypeOptions);
            });
          });

          console.log(this.RegTypeoptions);
          // 默认展示数据和下拉框中的默认赋值
          this.particularsDAta = this.dianList[index];
          // this.getRegTypeList.RegType = this.dianList[0].RegType;
          console.log(this.particularsDAta);
          this.$message({
            message: res.Message,
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.Message);
        });
    },
    // 点表---编辑
    deleteDian() {
      permissionUpdate()
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.Message,
            type: "success",
          });
        })
        .catch((error) => {
          this.$message.error(error.Message);
        });
    },
    // 点表---导出表格
    exportToExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          // this.excelData = this.tableData; // 你要导出的数据list。
          exportList().then((res) => {
            window.location.href="http://localhost:8080/api/v1/nodeTable/opt?devId=dev1"

            
          });
          // this.export2Excel();
        })
        .catch(() => {});
    },
    // export2Excel() {
    //   var _that = this;
    //   require.ensure([], () => {
    //   const {export_json_to_excel} = require('../utils/Export2Excel');
    //   // Export2Excel.js文件的位置
    //   const tHeader = ['id', '账户名', '密码', '昵称', '年纪', '性别', '地址'];
    //   //导出的文件表头字段名
    //   const filterVal = ['id', 'username', 'password', 'nickname', 'age', 'sex', 'address'];
    //   // 导出的文件数据对应字段名，需要与导出的数据字段相对应
    //   const list = _that.tableData;
    //   const data = _that.formatJson(filterVal, list);
    //   export_json_to_excel(tHeader, data, '用户数据表')
    //   // 导出的表格名称，根据需要自己命名
    //   }),
    //     formatJson(filterVal, jsonData) {
    //     return jsonData.map(v => filterVal.map(j => v[j]));
    //   };
    // }
    getSubmit() {
      this.controlShow = true;
      this.getcontrolList();
    },
    // 监控--渲染数据
    getcontrolList() {
      controlList("dev1").then((res) => {
        console.log("controlList", res.Data);
        this.controlList = res.Data;
      });
    },
    // 监控--修改数据值
    setData(row) {
      this.setShow = true;
      this.getcontrolLists.Value = row.Value
      this.getcontrolLists.DevId = row.ID
      this.getcontrolLists.NodeId = row.AccessMode
    },
    
    controlSet() {
      // const update = { DevId: this.DevId, NodeId:this.getcontrolLists.DevId, Val:this.getcontrolLists.Value};
      controlUpdate(this.getcontrolLists).then((res) => {
        console.log("shezhi", res);
        console.log(this.getcontrolLists);
      });
      
      this.getcontrolList()
      this.$confirm("修改成功", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success ",
      });
      this.setShow = false;
    },
  },
};
</script> 
 
<style>
.user-search {
  margin-top: 20px;
  margin-left: 65%;
}
.userRole {
  width: 100%;
}
.tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
.tableScopeSwitch .el-switch__label--right {
  z-index: 1;
  right: 6px; /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
.tableScopeSwitch .el-switch__label--left {
  z-index: 1;
  left: 6px; /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
.tableScopeSwitch .el-switch__label.is-active {
  display: block;
}
.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 65px !important; /*开关按钮的宽度大小*/
}
</style> 

 